<template>
  <div>
    <van-nav-bar title="提币" right-text left-arrow @click-left="goBack">
      <i style="font-size:10px;color:#666" slot="right" @click="goRecord">提币记录</i>
    </van-nav-bar>
    <div class="cate" @click="show =! show">
      <div>
        <span style="color:#D1A568">*</span>选择币种
      </div>
      <!-- 币种 -->
      <div>{{coinNow}}</div>
      <div>
        <img style="width:20px;" src="../../assets/images/icon-arrow-left.png" alt>
      </div>
    </div>

    <div class="cate">
      <div>
        <span style="color:#D1A568">*</span>提币地址
      </div>
      <div>
        <input v-model="virtualWalletWithdrawAddress" type="text" placeholder="请输入提币地址">
      </div>
      <div>
        <img @click="scanTo" style="width:20px;height:20px" src="../../assets/images/icon-scan.png" alt>
      </div>
    </div>

    <div class="cate" style="height:50px;">
      <div>
        <span style="color:#D1A568">*</span>提币数量
      </div>
      <div>
        <input
          style="width:50%"
          v-model="virtualWalletWithdrawNumber"
          type="text"
          placeholder="最少可提0.005"
        >
        <span>{{coinNow}}</span>
        <p style="font-size:10px;color:#666">可提现额度：{{coinNowMoney}}{{coinNow}}</p>
      </div>
      <div>
        <span @click="getAll" style="color:#D1A568">全部</span>
      </div>
    </div>

    <div class="cate">
      <div>
        <span style="color:#D1A568">*</span>手续费
      </div>
      <div>{{rateMoney}}{{coinNow}}</div>
      <div></div>
    </div>

    <div class="submit">
      <button
        @click="location(coinNow,virtualWalletWithdrawNumber)"
        type="submit"
        class="submit-btn"
      >提交</button>
    </div>

    <div class="detail">
      <p>提币说明</p>
      <p>1、最小提币数量为：0.005BTC</p>
      <p>2、请勿往非BTC地址转出BTC资产，否则您的资产将不可找回</p>
      <p>3、请仔细核对对您的提币地址，一旦发出提币请求，将无法撤回。</p>
    </div>

    <!-- 币种选择 -->
    <van-actionsheet v-model="show" :actions="actions" @select="onSelect"/>

    <!-- 弹框 -->
    <div class="cover" v-if="flagCover">
      <div class="cover-contain">
        <p></p>
        <p>您还未完成身份认证，暂无法进行提币</p>
        <div class="submit">
          <button style="margin-top:0" type="submit" class="submit-btn" @click="personTo">身份认证</button>
        </div>
        <img @click="flagCover=false" id="close" src="../../assets/images/close.png" alt>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import qs from "qs";
import { NavBar, Popup, Picker, Cell, CellGroup, Toast } from "vant";
import {
  coinType,
  coinAssets,
  totalIncomeAndWaitIncome,
  withdrawCoin
} from "../../axios/api.js";
export default {
  data() {
    return {
      virtualWalletWithdrawAddress: "", //提币地址
      virtualWalletWithdrawNumber: "", //提币数量
      coinNow: "",
      coinNowId: "234314", //币种id
      coinNowMoney: "",
      show: false,
      actions: [],
      chooseB: "请选择币种",
      chooseId: "",
      flagCover: false,
      rateMoney:'',
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Cell.name]: Cell
  },
  created() {
    if (
      !localStorage.getItem("cardId") ||
      localStorage.getItem("cardId") == ""
    ) {
      this.flagCover = true;
    } else {
      this.flagCover = false;
    }
    this.getCoinType();
    this.getLostMoney();
  },
  methods: {
    personTo() {
      this.$router.push({ name: "identityAuthentication" });
    },

    scanTo() {
      this.$router.push({ name: "scan" });
    },
    // 传值
   
    // 传值
    // location(one, two) {
    //   withdrawCoin({
    //     params: {
    //       token: sessionStorage.getItem("token"),
    //       virtualWalletId: this.coinNowId,
    //       virtualWalletWithdrawNumber: this.virtualWalletWithdrawNumber,
    //       virtualWalletWithdrawAddress: this.virtualWalletWithdrawAddress,
    //       handlingFee:'0'
    //     }
    //   }).then(res => {
    //     console.log(res.data, '98k');
    //     if (res.data.code == 200) {
    //       this.$router.push({
    //         path: "/location",
    //         query: {
    //           coinNow: one,
    //           virtualWalletWithdrawNumber: two
    //         }
    //       });
    //     }
    //   });
    // },

    location(one, two) {
      if(this.virtualWalletWithdrawAddress == "" ){
             Toast('请填写提币地址')
      }else if(this.virtualWalletWithdrawNumber == ""){
             Toast('请输入数量')
      }else if(this.virtualWalletWithdrawNumber == 0 || this.virtualWalletWithdrawNumber <0){
             Toast('数量不能为0')
      }
      $.ajax({
        type: "post",
        cache: false,
        traditional: true,
        dataType: "json",
        url: window.nowHref + "/coinTrade/withdrawCoin",
        xhrFields: {
          withCredentials: true
        },
        crossDomain: true,
        data: {
          token: sessionStorage.getItem("token"),
          virtualWalletId: this.coinNowId,
          virtualWalletWithdrawNumber: this.virtualWalletWithdrawNumber,
          virtualWalletWithdrawAddress: this.virtualWalletWithdrawAddress,
          handlingFee: this.rateMoney,
        },
        success: function(data) {
          console.log(data);
          if (data.code == "200") {
            Toast('提币申请成功！')
            // this.$router.push({
            //   path: "/location",
            //   query: {
            //     coinNow: one,
            //     virtualWalletWithdrawNumber: two
            //   }
            // });
          } else {
            Toast(data.msg);
          }
        }
      });
    },
    //提币记录
    goRecord() {
      this.$router.push({
        path: "/getRecord",
        query: {
          id:this.coinNowId
        }
      });
    },
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    getAll() {
      this.virtualWalletWithdrawNumber = this.coinNowMoney;
    },
    getLostMoney() {
      var getCoins = {
        token: sessionStorage.getItem("token"),
        virtualWalletId: this.coinNowId
      };
      coinAssets({
        params: getCoins
      }).then(res => {
        console.log(res.data.data, 9999);
        if (res.data.data == null) {
          this.coinNowMoney = 0;
          this.rateMoney = 0;
        } else {
          this.coinNowMoney = res.data.data.coinAssetc;
          this.rateMoney = res.data.data.rate;
        }
      });
    },
    getCoinType() {
      //获取币分类列表
      var that = this;
      coinType()
        .then(res => {
          console.log(res.data);
          that.coinType = res.data.data;
          that.actions = res.data.data;
          for (var i = 0; i < res.data.data.length; i++) {
            (that.actions[i].name = res.data.data[i].virtual_wallet_name),
              (that.actions[i].dataId = i);
          }
          that.coinNow = that.actions[1].name;
          that.coinNowId = that.actions[1].id;
        })
        .catch(function(err) {});
    },
    // 币种菜单
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      console.log(item);
      (this.coinNow = item.name),
        (this.coinNowId = item.id),
        this.getLostMoney(this.coinNowId);
      console.log(this.coinNowId);
    }
  }
};
</script>
<style lang="less" scoped>
.cate {
  height: 40px;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  font-size: 14px;
  div:nth-child(1) {
    width: 30%;
    color: #333;
  }
  div:nth-child(2) {
    width: 60%;
    color: #999;
    input {
      border: none;
      width: 70%;
    }
  }
  div:nth-child(3) {
    width: 10%;
  }
}

.submit {
  margin-top: 0.67rem;
  width: 100%;
  background-color: #fff;
  color: #fff;
  font-size: 14px;
  .submit-btn {
    width: 85%;
    height: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 14px;
    background-color: #d6ab6f;
    color: white;
    border-radius: 20px;
    // margin: 10vh auto 0;
    border: 0;
  }
}
.cover {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 99;
  font-size: 14px;
  .cover-contain {
    width: 90%;
    background-color: #fff;
    border-radius: 5px;
    margin: 30vh auto;
    padding: 40px 20px 20px;
    box-sizing: border-box;
    position: relative;
    #close {
      position: absolute;
      right: 0;
      top: 0;
      width: 10%;
    }
  }
}
.detail {
  width: 90%;
  margin: 30px auto;
  text-align: left;
  font-size: 9px;
  color: #999;
  p:first-child {
    font-size: 12px;
  }
}
</style>
